torchd.form.field = function(options) {
	this.init(options);
};

torchd.form.field.prototype.init = function(options) {
	var self = this;
	// Create the dom element based on parameters
	
	// Generate form fields
	this.elements = [];
	for(var i=0;i<options.fields.length;i++) {
		switch(options.fields[i].type) {
			case 'text':
			default:	
				var val = (options.fields[i].defaultValue) ? options.fields[i].defaultValue : '';
				var element = $('<input/>').val(val).attr('type', 'text');
				if(options.fields[i].class) {
					element.addClass(options.fields[i].class);
				}
				if(options.fields[i].label) {
					element.data('label', options.fields[i].label);
				}
				if(options.fields[i].name) {
					element.attr('name', options.fields[i].name);
				}	
				this.elements.push(element);
				break;
			case 'textarea':
				var val = (options.fields[i].defaultValue) ? options.fields[i].defaultValue : '';
				var element = $('<textarea/>').attr('name', options.fields[i].name).html(val);
				this.elements.push(element);
				break;
			case 'radio':
				for(var n=0;n<options.fields[i].options.length;n++) {
					this.elements.push($('<input/>').attr('type', 'radio').data('label', options.fields[i].options[n].label).val(options.fields[i].options[n].value).attr('name', options.fields[i].name));
				}
				break;
			case 'checkbox':
				for(var n=0;n<options.fields[i].options.length;n++) {
					this.elements.push($('<input/>').attr('type', 'checkbox').data('label', options.fields[i].options[n].label).val(options.fields[i].options[n].value).attr('name', options.fields[i].options[n].name));
				}
				break;
			case 'size':
				var amount = $('<input/>').attr('type', 'text').attr('name', options.fields[i].name + '_amount').addClass('torchd-ui-thin');
				var unit = $('<select/>').attr('name', options.fields[i].name + '_unit');
				$('<option/>').val('%').html('%').appendTo(unit);
				$('<option/>').val('px').html('Pixels').appendTo(unit);
				this.elements.push(amount);
				this.elements.push(unit);
				break;
			case 'select':
				var select = $('<select/>').data('label', options.fields[i].label).attr('name', options.fields[i].name);
				for(var n=0;n<options.fields[i].options.length;n++) {
					var option = $('<option/>').html(options.fields[i].options[n].label).val(options.fields[i].options[n].value);
					if(options.fields[i].defaultValue == options.fields[i].options[n].value) {
						option.attr('selected', 'selected');
					}
					select.append(option);
				}
				this.elements.push(select);
				break;
			case 'livesearchMultiple':
				var select = $('<select/>').attr('multiple', 'multiple').data('livesearch', 'multiple').data('label', options.fields[i].label).attr('name', options.fields[i].name);
				for(var n=0;n<options.fields[i].options.length;n++) {
					var option = $('<option/>').html(options.fields[i].options[n].label).val(options.fields[i].options[n].value);
					if(options.fields[i].defaultValue == options.fields[i].options[n].value) {
						option.attr('selected', 'selected');
					}
					select.append(option);
				}
				this.elements.push(select);
				break;
			case 'livesearch':
				var select = $('<select/>').data('livesearch', 'singular').data('label', options.fields[i].label).attr('name', options.fields[i].name);
				for(var n=0;n<options.fields[i].options.length;n++) {
					var option = $('<option/>').html(options.fields[i].options[n].label).val(options.fields[i].options[n].value);
					if(options.fields[i].defaultValue == options.fields[i].options[n].value) {
						option.attr('selected', 'selected');
					}
					select.append(option);
				}
				this.elements.push(select);
				break;
			case 'datetime':
				var val = (options.fields[i].defaultValue) ? options.fields[i].defaultValue : '';
				var element = $('<input/>').attr('type', 'text').attr('readonly', 'readonly').data('datetime', true).attr('name', options.fields[i].name).html(val);
				this.elements.push(element);
				break;
			case 'color':
				var val = (options.fields[i].defaultValue) ? options.fields[i].defaultValue : '';
				var element = $('<input/>').val(val).addClass('colorpicker').attr('type', 'text').data('label', options.fields[i].label).data('colorPicker', true).attr('name', options.fields[i].name);
				
				this.elements.push(element);
				break;
				
			
		}
	}
	// Add them to the fieldset
	this.fieldset = $('<fieldset/>');
	
	if(this.elements.length == 1) {
		if(options.display) {
			$('<legend/>').html(options.display).appendTo(this.fieldset);
		}
		this.fieldset.append(this.elements[0]);
	}
	else if(this.elements.length > 1) {
		if(options.display) {
			$('<legend/>').html(options.display).appendTo(this.fieldset);
		}
		for(var i=0;i<this.elements.length;i++) {
			var grid = $('<div/>').addClass('form-grid').appendTo(this.fieldset);
			if(options.gridClass) {
				grid.addClass(options.gridClass);
			}
			$('<label/>').html(this.elements[i].data('label')).appendTo(grid);
			this.elements[i].appendTo(grid);
		}
		$('<div/>').css('clear', 'both').appendTo(this.fieldset);
	}
	else {
		alert('Error creating form field');
	}
};

/**
 * Get the data for each of the form fields and return it in an array
 *
 * @return array returnArray		Array of form field name/value pairs
 */
torchd.form.field.prototype.getData = function() {
	var returnArray = [];
	for(var i=0;i<this.elements.length; i++) {
		returnArray.push({
			name:this.elements[i].attr('name'),
			val:this.elements[i].val()
		});
	}
	return returnArray;
};

torchd.form.field.prototype.appendTo = function(parent) {
	this.fieldset.appendTo(parent);
	
};

torchd.form.field.prototype.initSpecials = function() {
	var fieldset = this.fieldset;
	// Livesearchify any elements that need it
	this.fieldset.find('select').each(function() {
		if($(this).data('livesearch')) {
			$(this).livesearch($(this).data('livesearch'));
		}
	});
	
	// Datetime picker & color picker
	this.fieldset.find('input').each(function() {
		if($(this).data('datetime')) {
			$(this).datetimepicker();
		}
		else if($(this).data('colorPicker')) {
			var val = $(this).val();
			$(this).jscolor();
			if(val == 'none') {
				$(this).val('').css('background-color', '#3a3a3a').css('color', 'white');
			}
			var none = $('<button/>').html('X').addClass('torchd-ui-colorpicker-button').data('colorPicker', $(this)).click(function(e) {
				e.preventDefault();
				$(this).data('colorPicker').val('').css('background-color', '#3a3a3a').css('color', 'white');
			}).insertAfter($(this));
		}
	});
	
};